<!--
 * @Date: 2021-10-27 09:15:50
 * @LastEditors: 邓春宜
 * @Desc: 饼图表图样式1
 * @LastEditTime: 2021-11-29 16:18:55
 * @FilePath: \tianjushi-kanban\src\components\charts\Pie1.vue
-->
<template>
  <div :style="[{ width: width, height: height, overflow: 'hidden' }]">
    <div
      ref="echartref"
      :style="[{ width: width, height: height }, _resetChartStyle]"
    ></div>
  </div>
</template> 
<script>
import * as echarts from "echarts";

import { onMounted, toRefs, ref, reactive, watch, computed } from "vue";
import { resetChartStyle, showLoading } from "@/core/tools/common";
export default {
  props: {
    title: {
      type: String,
      default: "100%",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "100%",
    },
    chartdata: {
      type: Array,
      default: [
        { name: "用电", value: 37 },
        { name: "用水", value: 24 },
        { name: "用气", value: 21 },
        { name: "用热", value: 25 },
      ],
    },
    color: {
      type: Array,
      default: ["#1BC85E", "#00A0E9", "#fccb05", "#f5804d"],
    },
    legend: {
      type: Object,
      default: { orient: "horizontal", left: "center", bottom: 0 },
    },
  },
  setup: function (props, context) {
    /*监听props*/
    watch(props, (newProps, oldProps) => {
      f_echartInit(state.chartInit);
    });

    let state = reactive({
      echartref: ref(),
      chartInit: "",
    });

    const _resetChartStyle = computed({
      get() {
        return resetChartStyle();
      },
    });

    const f_echartInit = (chartdom) => {
      let option = {
        color: props.color,
        legend: {
          icon: "circle",
          orient: props.legend.orient,
          left: props.legend.left,
          bottom: props.legend.bottom,
          textStyle: {
            color: "#fff",
            fontSize: 18,
          },
          formatter: function (name) {
            var data = option.series[0].data;
            var total = 0;
            var tarValue;
            for (var i = 0; i < data.length; i++) {
              total += data[i].value;
              if (data[i].name == name) {
                tarValue = data[i].value;
              }
            }
            var v = tarValue;
            var p = Math.round((tarValue / total) * 100);
            return `${name} (${p}%)`;
          },
          itemGap: 10,
        },
        series: [
          {
            name: "标签使用频率",
            type: "pie",
            radius: ["55%", "75%"],
            center: ["50%", "40%"],
            roseType: "radius",
            label: {
              show: true,
              color: "#fff",
              fontSize: 16,
              position: "outside",
            },
            labelLine: {
              show: false,
              length: "1px",
              length2: "1px",
            },
            emphasis: {
              label: {
                show: false,
              },
            },

            data: props.chartdata,
          },
        ],
      };

      chartdom.setOption(option);
      chartdom.hideLoading();
    };
    //挂载
    onMounted(() => {
      state.chartInit = echarts.init(state.echartref);
      state.chartInit.showLoading(showLoading());
      f_echartInit(state.chartInit);
    });
    return {
      ...toRefs(state),
      _resetChartStyle,
    };
  },
};
</script>

<style>
</style>